<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>树图-异步加载</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
	
	<script src="../../element/static/js/jquery-3.5.1.js"></script>
</head>
<body style="height: 100%; margin: 0">
	<div id="main" style="height: 100%"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var dom = document.getElementById('main');
var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false
});
var option;

myChart.showLoading();
$.get('static/data.json', function (data) {
	myChart.hideLoading();
	data.children.forEach(function (datum, index) {
		index % 2 === 0 && (datum.collapsed = true);
	});
	
	option = {
		tooltip: {
			trigger: 'item',
			triggerOn: 'mousemove'
		},
		series: [
			{
				type: 'tree',
				data: [data],
				top: '1%',
				left: '7%',
				bottom: '1%',
				right: '20%',
				// layout: 'radial',	//正交布局'orthogonal'、径向布局'radial'
				orient: 'LR',		//树图中 正交布局 的方向'LR' , 'RL', 'TB', 'BT'
				// symbol: 'roundRect',		//标记的图形
				symbolSize: 7,
				roam: true,		//是否开启鼠标缩放和平移漫游
				// tooltip: {
				// 	formatter: function (params, ticket, callback){
				// 		// console.log(params);
				// 		return params.data.name + "：" + params.data.value;
				// 	}
				// },
				label: {
					// rotate: -90,
					position: 'left',
					verticalAlign: 'middle',
					align: 'right',
					fontSize: 9
				},
				leaves: {
					label: {
						position: 'right',
						verticalAlign: 'middle',
						align: 'left'
					}
				},
				emphasis: {
					focus: 'descendant'
				},
				expandAndCollapse: true,
				animationDuration: 550,
				animationDurationUpdate: 750
			}
		]
	}
	myChart.setOption(option);
	
});

window.addEventListener('resize', myChart.resize);
myChart.on('click', function (params) {
	// console.log(params);
	console.log(params.data);
});

</script>
</html>
